<template>
  <!-- 表单项 -->
  <view class="form-list">
    <uni-forms ref="applyRef" :modelValue="orderForm" :rules="formRules" :border="true" class="card-form">
      <uni-forms-item label="申请部门" name="applyDepartment">
        <picker @change="changePickerOne" :value="orderForm.applyDepartment" :range="departData"  :disabled="isEditor">
          <view class="uni-input">{{departData[orderForm.applyDepartment]}}</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item label="领用部门" name="useDepartment">
       <picker @change="changePickerTwo" :value="orderForm.useDepartment" :range="departData" :disabled="isEditor">
         <view class="uni-input">{{departData[orderForm.useDepartment]}}</view>
       </picker>
      </uni-forms-item>
      <uni-forms-item label="领用厂区" name="factory">
        <picker @change="changePickerThree" :value="orderForm.factory" :range="factoryData" :disabled="isEditor">
          <view class="uni-input">{{factoryData[orderForm.factory]}}</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item label="领料用途" name="useType">
        <picker @change="changePickerFour" :value="orderForm.useType" :range="sueTypeData">
          <view class="uni-input">{{sueTypeData[orderForm.useType]}}</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item label="是否加急" name="isUrgent">
        <switch :checked="orderForm.isUrgent" @change="changeIsUrgentFive" :disabled="isEditor" />
      </uni-forms-item>
      <uni-forms-item label="机台号" name="workbenchNum">
        <uni-easyinput type="text" v-model="orderForm.workbenchNum" placeholder="请输入" :disabled="isEditor" />
      </uni-forms-item>
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput type="text" v-model="orderForm.remark" placeholder="请输入" :disabled="isEditor" />
      </uni-forms-item>
      <uni-forms-item label="扫码">
        <button class="red-btn" size="mini" @click="handelScanCode" :disabled="isEditor"> 扫码 </button>
      </uni-forms-item>
      <uni-forms-item label="储位编码" name="storageCode">
        <uni-easyinput type="text" v-model="orderForm.storageCode" placeholder="请输入"  :disabled="isEditor" />
      </uni-forms-item>
      <uni-forms-item label="物料信息">
        <uni-file-picker 
          v-model="orderForm.fileData" 
          file-mediatype="all" 
          limit="1" 
          @progress="fileProgress"
          @success="fileSuccess" 
          @fail="fileFail"
          @select="handleFileUpload"
          :disabled="isEditor"
           >
        	<button class="red-btn" size="mini" :disabled="isEditor">选择文件</button>
        </uni-file-picker>
      </uni-forms-item>
      <uni-forms-item label="审核流程">
        <!-- 流程 -->
        <uni-steps :options="processLists" active-color="#007AFF" :active="orderForm.processStatus" direction="column" />
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  
  
  const props = defineProps({
    isEditor: {   // 控制编辑框是否可编辑 
      type: Boolean,
      default: false
    },
    dataList: {
      type: Object,
      default: {}
    }
  })
  
  
  
  /* 表单 */
  const orderForm = ref({
    applyDepartment: 0,
    useDepartment: 0,
    factory: 0,
    useType: 0,
    applyDepartmentName: '', // 申请部门
    useDepartmentName: '', // 领用部门
    factoryName: '', // 领用厂区
    useTypeName: '',  // 领料用途
    isUrgent: false, // 是否加急
    fileData: {},  //上传文件
    processStatus: 0, // 流程步骤
  })
  const formRules =  ref()
  
  /* 基础选项数据  */
  const departData = ref(['工业工程中心', '总经办', '物控中心', '财务中心'])
  const changePickerOne = (e)=>{
    orderForm.value.applyDepartment = e.detail.value
  }
  const changePickerTwo = (e)=>{
    orderForm.value.useDepartment = e.detail.value
  }
  
  /* 厂区  */  
  const factoryData = ref([ '三厂平仓','二厂平仓','博汇二期仓库','五厂二期立库' ])
  const changePickerThree = (e)=>{
    orderForm.value.factory = e.detail.value
  }
  
  /* 领料用途 */ 
  const sueTypeData = ref([ '日常办公','日常损耗','电脑耗材','月用量' ])
  const changePickerFour = (e)=>{
    orderForm.value.useType = e.detail.value
  }
  /* 是否急用 */ 
  const changeIsUrgentFive = (e)=>{
    orderForm.value.isUrgent = e.detail.value
  }
  /* 扫码 */ 
  const handelScanCode = ()=>{
    uni.scanCode({
      onlyFromCamera:true,
      success:function(res){
        orderForm.value.remark = `类型：${res.scanType},内容：${res.result}`
        console.log('条码类型：' + res.scanType);
        console.log('条码内容：' + res.result);
      }
    })
  }
  
  
  /* 文件上传 */ 
  // 选择文件后触发
  const handleFileUpload = (e)=>{
    console.log('eee--->0',e);
    if(e.tempFiles[0].extname !== 'xlsx'){
      return uni.showToast({ title: '文件类型不符合',duration: 3000,icon:'none' })
    }
    orderForm.value.fileData = JSON.stringify(e.tempFiles)
  }
  // 文件上传时触发
  const fileProgress = (e)=>{
    console.log('eee--->11',e);
  }
  //
  const fileSuccess = (e)=>{
    console.log('eee--->2',e);
  }
  const fileFail = (e)=>{
    console.log('eee--->3',e);
  }
  
  /* 流程图  */
  const processStatus =  ref(0)
  const processLists = ref([
    { title: '内部审核人',desc: '檀健次'}, 
    { title: '外部审核人',desc: '王嘉尔'}
    ])
  
  
  
</script>

<style lang="scss">
</style>